<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新增图书</title>
    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 30px;                     /*30像素*/
            background-color: #f9f9f9;        /*16进制的颜色值*/
        }
        /*表示优先使用 "Helvetica Neue" 字体。•
        sans-serif：这是一个通用字体系列，表示如果没有找到 "Helvetica Neue" 字体，则使用系统默认的无衬线字体（如 Arial、Verdana 等）。*/

        h1 {
            text-align: center;            /*文本对齐方式*/
            color: #333;                   /*16进制的颜色值*/
        }
        /*html的标题标签，常用于表示页面的主要标题*/

        form {
            max-width: 500px;
            margin: 0 auto;      /* auto：表示左右外边距自动计算，通常用于水平居中对齐。*/
            background: white;
            padding: 20px;       /*CSS 属性，用于设置元素的内边距。*/
            border-radius: 6px;  /*表示元素的四个角都有 6 像素的圆角。*/
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            /*CSS 属性，用于设置元素的阴影效果。
              0  ：水平偏移量为 0。
              2px  ：垂直偏移量为 2 像素。
              8px  ：模糊半径为 8 像素。
              rgba(0,0,0,0.1)  ：阴影颜色为黑色，透明度为 10%。*/
        }

        label {
            display: block;/* block：表示该元素是一个块级元素，每个label会独占一行。*/
            margin: 12px 0 6px;/*上边距12像素，左右为0，下边距为6*/
            font-weight: 600;/*表示字体比正常字体稍粗，但比加粗字体稍细。*/
        }

        input, textarea, select {
            width: 100%;
            padding: 8px 10px;/*内边距*/
            border: 1px solid #ccc;/*边框，1像素，实线，颜色*/
            border-radius: 4px;
            box-sizing: border-box;/*CSS 属性，用于设置元素的盒模型。*/
        }

        textarea {
            height: 100px;
            resize: vertical;
            /*用于设置用户是否可以调整元素的大小。
            vertical  ：表示用户可以垂直调整文本域的大小，但不能水平调整*/
        }

        button {
            margin-top: 20px;
            width: 100%;
            padding: 10px;
            background-color: #2c3e50;
            border: none;/*无边框*/
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #1a2733;
        }
    </style>
    <script>
        function submitForm() {
            let numberInput = document.getElementById('number');
            /*这是一个 JavaScript 方法，
            用于通过id属性获取页面上的一个元素。这里的 id是 HTML 元素的一个属性，用于唯一标识页面上的某个元素。
            在这里，'number'是输入框的id，表示获取页面上id="number"的输入框元素。
            如果找到了这个元素，  numberInput   将被赋值为该输入框的 DOM 对象；
            如果没有找到，       numberInput   将被赋值为   null  。*/
            let number = numberInput ? numberInput.value.trim() : '1';
            /*这是一个三元运算符的用法，用于根据条件选择一个值。
            条件：  numberInput   是否为   true  （即是否找到了输入框）。
            如果   numberInput   不为   null  （即找到了输入框），则执行   numberInput.value.trim()  。
            如果   numberInput   为   null  （即没有找到输入框），则使用默认值   '1'  。*/
            const formData = {
                title: document.getElementById('title').value.trim(),
                author: document.getElementById('author').value.trim(),
                publisher: document.getElementById('publisher').value.trim(),
                isbn: document.getElementById('isbn').value.trim(),
                /*在 JavaScript 中，trim()是一个字符串方法，用于移除字符串两端的空白字符（包括空格、制表符、换行符等）。它不会修改原始字符串，而是返回一个新的字符串，其中两端的空白字符被移除。*/
                batch: document.getElementById('batch').value.trim(),
                /*如果batch的值是'1'，表示当前操作是批量新增图书。如果batch的值是'0‘，表示当前操作是单个新增图书。*/
                number: number,
                /*number: number, 表示一个键值对，也是批量增加图书的功能，如果用户没有输入数量，  number   的值将是默认值   '1' */
                status: document.getElementById('status').value
            };
            /* <script>标签内定义了一个 JavaScript 函数submitForm()  ，用于处理表单提交。*/

            fetch('/book/admin/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                },
                body: JSON.stringify(formData)
            }).then(res => res.json())
                .then(data => {
                    if (data.code === 0) {
                        alert("新增成功");
                        window.location.href = '/book/admin/books';
                    } else {
                        alert("新增失败：" + data.message);
                    }
                });
            return false;

        }
    </script>
</head>

<body>
<h1>新增图书</h1>
<!-- <form> 标签定义了一个表单，用于收集用户输入的数据。
onsubmit="return submitForm()"  ：这是一个事件处理属性，表示当用户提交表单时，会调用submitForm()函数。
这个函数会拦截表单的默认提交行为，并通过 JavaScript 发送数据到服务器。-->
<form onsubmit="return submitForm()">
    <label for="title">书名</label>
    <input type="text" id="title" name="title" required>
    <!-- required   属性表示该字段是必填的，用户必须输入内容才能提交表单。-->

    <input type="hidden" id="batch" name="batch" th:value="${batch}">
<!--这是一个隐藏字段，用户在页面上看不到它，但它会随着表单一起提交。 th:value="${batch}"  ：
这是 Thymeleaf 的语法，表示该字段的值是从后端传递的变量batch动态设置的。这个字段用于标识当前操作是否是批量新增图书。-->

    <label for="author">作者</label>
    <input type="text" id="author" name="author" required>

    <label for="publisher">出版社</label>
    <input type="text" id="publisher" name="publisher">

    <label for="isbn">ISBN</label>
    <input type="text" id="isbn" name="isbn" required>

    <div th:if="${batch == '1'}">
        <label for="number">数量</label>
        <input type="text" id="number" name="number" required>
    </div>
<!--这是一个条件判断，只有当batch的值为'1'时，才会显示“数量”输入框。用户可以输入每种图书的数量，该字段是必填的。-->
    <label for="status">状态</label>
    <select id="status" name="status" required>
        <option value="AVAILABLE">可借</option>
        <option value="BORROWED">已借</option>
    </select>
    <!-- <select> 标签定义了一个下拉菜单，用户可以选择图书的状态（“可借”或“已借”）。-->

    <button type="submit">保存</button>
    <!--由于表单的onsubmit属性绑定了submitForm()函数，点击按钮时会调用该函数，而不是直接提交表单。-->
</form>
</body>
</html>